<template>
  <view>
    商品详情
    <view class="">
      <uni-list>
        <!-- <uni-list-item title="列表文字" /> -->
        <!--<uni-list-item title="规格" rightText="500g/份" />
        <uni-list-item title="品牌" rightText="鹿凌青" />
        <uni-list-item title="服务" rightText="品质保证" /> -->
        <!-- <uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" /> -->
        
        <image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" alt="">
        
        <uni-list-item>
          <template v-slot:header>
            <view>规格: 500g/份</view>
          </template>        
        </uni-list-item>
        <uni-list-item>
          <template v-slot:header>
            <view>品牌: 鹿凌青</view>
          </template>        
        </uni-list-item>
        
      </uni-list>
    </view>
    
    <view style="margin: 20upx 10upx;">
      <view>图文详情</view>
      <rich-text :nodes="strings"></rich-text>
    </view>
    
    <view class="goods-carts">
      <uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
        @buttonClick="buttonClick" />
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          icon: 'chat',
          text: '客服'
        }, {
          icon: 'cart',
          text: '购物车',
          info: 2
        }],
        buttonGroup: [{
            text: '加入购物车',
            backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
            color: '#fff'
          }
        ],
        strings: '<div style="text-align:center;"><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>'

      }
    },
    methods: {
      onClick(e) {
        uni.showToast({
          title: `点击${e.content.text}`,
          icon: 'none'
        })
      },
      buttonClick(e) {
        console.log(e)
        this.options[2].info++
      }
    },
    onLoad(option) {
      console.log(option)
    }
  }
</script>

<style>
  .goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
  }
</style>
